<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-23 17:57:38
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-23 21:29:26
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<form action="" id="createForm">
</form>
<body>
    <script>
        var arr = [{

                    label: "用户名",

                    name: "username",

                    type: "text"

                    }, {

                    label: "密码",

                    name: "password",

                    type: "password"

                    }, {

                    label: "性别",

                    name: "gender",

                    type: "select",

                    value: ['男', '女', '不男', '不女', 'Gay', '妖王']

                    }, {

                    label: "爱好",

                    name: "hobby",

                    type: "checkbox",

                    value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

                    }, {

                    label: '是否已婚',

                    name: 'married',

                    type: 'radio',

                    value: ['已婚', '未婚']

                    },
                    {

                    label: '简介',

                    name: 'resume',

                    type: 'textarea'

                    }];
                    // 获取form表单
                    var form =document.querySelector("#createForm");
                    for(var i=0;i<arr.length;i++){
                        // 创建label
                       var label = document.createElement("label");
                       label.innerHTML=arr[i].label;
                        form.appendChild(label);
                        // 创建input
                        var input = document.createElement("input");
                        var name= arr[i].name;
                        var value = arr[i].value;
                        var type=arr[i].type;
                        if(type==="text"||type==="password"){
                            input.setAttribute("type",type);
                            input.setAttribute("name",name);
                            form.appendChild(input);
                        }else if(type==="checkbox"||type==="radio"){
                            console.log(1);
                            
                            for(var j=0;j<value.length;j++){
                                var input = document.createElement("input");
                                input.setAttribute("type",type);
                                input.setAttribute("name",name);
                                var txt = document.createTextNode(value[j]);
                                form.appendChild(input);
                                form.appendChild(txt);
                            }
                        } else if(type==="select"){
                            var other = document.createElement(type);
                            other.setAttribute("name",name);
                            for(var k=0;k<value.length;k++)
                            {   
                                
                                var option = document.createElement("option");
                                option.setAttribute("value",value[k]);
                                // console.log(option);
                                option.innerHTML=value[k]
                                other.appendChild(option);
                                }
                                form.appendChild(other);
                           }else {
                            var other = document.createElement(type);
                            
                            other.setAttribute("name",name);
                            other.setAttribute("value",value);
                            form.appendChild(other);
                            
                        }
                      
                       
                        
                        var br =document.createElement("br");
                        form.appendChild(br);
                      }
    </script>
    
</body>
</html>